<template>
  <div id="login" class="login-page">
    <div class="formdiv">
      <el-form>
        <el-row :gutter="20">
          <el-col class="title" :offset="5" :span="15">
            <h1>&nbsp;&nbsp;大学教室管理系统</h1>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col class="col-label" :offset="6" :span="4">
            <span class="label" style="color: black;">账号：</span>
          </el-col>
          <el-col :span="40 ">
            <el-input type="text" placeholder="请输入学号" v-model="account.studentNumber"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col class="col-label" :offset="6" :span="4">
            <span class="label" style="color: black;">姓名：</span>
          </el-col>
          <el-col :span="40">
            <el-input type="text" placeholder="请输入真实姓名" v-model="account.name"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col class="col-label" :offset="6" :span="4">
            <span class="label" style="color: black;">密码：</span>
          </el-col>
          <el-col :span="40">
            <el-input type="password" placeholder="请输入密码" v-model="account.password"></el-input>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :offset="8" :span="8">
            <span>
              <a href="http://localhost:8081/" style="color: black;" @click="register">去登录?</a>
              <!-- / -->
              <!-- <a href="#" @click="resetPwd" style="color: black;">重置密码</a> -->
            </span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :offset="10" :span="4">
            <el-button type="primary" round @click="onSubmit">注册</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: 'login',
  data() {
    return {
      account: {
        studentNumber: '',
        password: '',
        name: '',
      }
    }
  },
  methods: {
    // register() {
    //   this.$message({
    //     message: '好像没这功能',
    //     type: 'info'
    //   })
    // },
    // resetPwd() {
    //   this.$message({
    //     message: '下辈子吧',
    //     type: 'success'
    //   })
    // },
    onSubmit() {
      axios({
        url: "http://localhost:8080/user/register",
        method: "Post",
        data: this.account
      }).then(res => {
        if (res.data == "1") {
          this.$router.push('/')
        } else {
          alert("注册失败，请规范输入！");
        }

      })

    }
  }
}
</script>
  
<style scoped>
  #login {
      text-align: center;
      margin: 0 auto;
    }
    .label {
      height: 40px;
      line-height: 40px;
    }
    .col-label {
      text-align: right;
    }
    .el-form {
      height: 450px;
      /* width: 350px; */
      background-color: rgba(255, 255, 255, 0.65);
      padding-top: 80px;
      border-radius: 3%;
      /* padding-right: 60px; */
    }
    .el-row {
      padding-top: 15px;
    }
    .formdiv {
      padding-top: 100px;
      padding-left: 500px;
      padding-right: 500px;
      /* background-color: aliceblue; */
      /* height: 100px; */
    }
    .el-button {
      width: 120px;
    }
    /* .title {
      margin-top: 10%;
    } */
    .login-page {
      height: 100vh; /* Set the height of the element to 100% of the viewport height */
      background-image: url('~@/assets/tianyuan.jpg');
      background-size: cover;
      background-position: center;
    }
</style>